<template>
  <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="500px"
  >
    <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        label-width="120px"
        ref="nodeSetting"
    >
      <el-form-item v-for="(item,index) in panel" :key="index" :label="item.label" :required="item.required">
        <el-input
            v-if="item.type==='el-input'"
            v-model="item.value"
            style="width: 200px"
            :placeholder="item.prop">
        </el-input>
        <el-select
            v-if="item.type==='el-select'"
            v-model="item.value" :placeholder="item.prop">
          <el-option
              v-for="option in item.options"
              :key="option"
              :label="option"
              :value="option"
              >
          </el-option>
        </el-select>
        <data-source v-if="item.type==='source'"
                     v-model="item.value" :placeholder="item.prop">

        </data-source>
      </el-form-item>
    </el-form>
<!--    <span-->
<!--        slot="footer"-->
<!--        class="dialog-footer">-->
<!--        <el-button-->
<!--            @click="cancel">-->
<!--          取 消-->
<!--        </el-button>-->
<!--        <el-button-->
<!--            type="primary"-->
<!--            @click="settingSubmit">-->
<!--          确 定-->
<!--        </el-button>-->
<!--      </span>-->
  </el-dialog>
</template>

<script>
import DataSource from "@/components/file/DataSource";

export default {
  name: "AttrPanel",
  components:{DataSource},
  props: {
    id: {
      type: String,
      default: null,
    },
    meta: {
      type: Object,
      default: function () {
        return {}
      },
    },
    visibleAble: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      panel: [],
      title: ""
    }
  },
  mounted() {
    this.visible = this.visibleAble;
  },
  watch: {
    visible(val) {
      this.$emit("update:visibleAble", val)
    },
    visibleAble(val) {
      this.visible = val;
    },
    meta(val) {
      this.title = val.label;
      this.panel = val.panel;
    }
  },
  methods: {
    cancel() {
      this.visible = false
      this.$refs.nodeSetting.clearValidate()
    },
    /**
     * 提交
     */
    settingSubmit() {

    }

  }


}
</script>

<style scoped>

</style>
